<template >
	<transition name='height'>
		<chat-type class="notice-container" :msgDataItem="indexNotice" v-if="show">
			<span class="close-btn" slot="close" @click="close"></span>
		</chat-type>
	</transition>
</template>

<script>
	import ChatType from '@/components/chat-type/chat-type'
	import { mapMutations, mapState, mapActions, } from 'vuex';
	export default {
		name: 'index-notice',
		props: {
			
		},
		data() {
			return {
				notice: null,
				show: true
			}
		},
		computed: {
			...mapState(['indexNotice']),
		},
		watch: {
			indexNotice(to,from) {
				if(!from && to) {
					this.show = true
				}
			}
		},
		methods: {
			...mapActions(['getMsgDataAsyn','chatReadAsyn']),
			...mapMutations(['getNextNotice']),
			close() {
				var options = {
					record: this.indexNotice.sid
				}
				this.chatReadAsyn(options)
				this.show = !this.show;
				setTimeout(() =>{
					this.show = !this.show
				},2000)
			}
		},
		created(){
			this.getMsgDataAsyn({
				getMsgType: 'index'
			})
		},
		components: {
			'chat-type': ChatType,
		}
	}
</script>

<style lang="scss" scoped> 
.notice-container {
	.close-btn{
		width: 30px;
		height: 30px;
		margin-right: -15px;
		margin-top: -15px;
		padding: 10px;
		box-sizing: content-box !important;
		background-origin: content-box !important;
		background: url('../../../static/img/delete.svg');	
		background-size: cover;
		background-repeat: no-repeat;

	}
	
}
</style>